<template>
  <div class="informationBox">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item>
        <el-select filterable v-model="formInline.stoId" placeholder="请选择仓库" @change="getCkId">
          <el-option v-for="(item, index) in wareHouseData" :key="index" :value="item.stoId" :label="item.stoName">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select filterable clearable v-model="formInline.stoAreaId" @change="selectData" placeholder="请选择库区">
          <el-option v-for="(item, index) in wmsData" :key="index" :value="item.stoAreaId" :label="item.stoAreaName">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input v-model="formInline.huowname" placeholder="请输入剂型名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-circle-plus-outline" v-hasPermi="['index:region:add']"
                   @click="add('add')">新增
        </el-button>
        <el-button type="primary" icon="el-icon-search" v-hasPermi="['index:region:query']"
                   @click="queryValidateForm">查询
        </el-button>
        <el-button type="danger" icon="el-icon-refresh" @click="cancelValidateForm">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="informationList" border height="605px">
      <el-table-column type="index" label="序号" align="center"></el-table-column>
      <el-table-column prop="formulationName" label="剂型名称" align="center"></el-table-column>
      <el-table-column prop="formulationCode" label="剂型编号" width="180" align="center"></el-table-column>
      <el-table-column prop="enableState" label="是否启用" width="180" align="center">
        <template slot-scope="scope">
          <el-switch :value="scope.row.enableState" active-color="#13ce66" inactive-color="#ff4949" :active-value="'1'"
                     v-hasPermi="['index:region:stateEdit']" :inactive-value="'0'" @change="toggleState(scope.row)">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button v-hasPermi="['index:region:edit']" size="mini" type="text" icon="el-icon-edit"
                     @click="add('edit', scope.row)">修改
          </el-button>
          <el-button v-hasPermi="['index:region:edit']" size="mini" type="text" icon="el-icon-delete"
                     @click="deleteBtn(scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background layout="total, prev, pager, next, sizes,jumper" @size-change="handleSizeChange"
                   @current-change="handleCurrentChange" :current-page="formInline.pageNum"
                   :page-size="formInline.pageSize"
                   :page-sizes="[20, 20, 50, 100]" :total="total">
    </el-pagination>
    <addInformation ref="addInformationRef" :stoId="formInline.stoId" :stoAreaId="formInline.stoAreaId"
                    :visible.sync="visible" @addSuccess="addSuccess">
    </addInformation>
  </div>
</template>

<script>
import {
  findAllBasicStoStockData,//货区获取
  getAllWarehouseList,//仓库下拉
  findStoAreaList,//获取table
  stoArea,//删除
  updateStoAreaState,//更改状态
} from "@/api/index/yxl.js"
import addInformation from './addInformation/index.vue'

export default {
  data() {
    return {
      informationList: [],
      visible: false,
      formInline: {
        stoId: '',
        pageSize: 20
      },
      wmsData: [],
      total: 0,
      wareHouseData: [],//仓库下拉
    }
  },
  components: {
    addInformation
  },
  created() {
    //获取WMS
    this.getSelect();//仓库下拉
  },
  methods: {
    //仓库切换
    getCkId(val) {
      this.formInline.stoId = val;
      this.getWms(this.formInline.stoId);
    },
    //仓库下拉获取
    getSelect() {
      getAllWarehouseList().then(res => {
        this.wareHouseData = res.data;
        this.formInline.stoId = res.data[0].stoId;
        this.getWms(this.formInline.stoId);
      })
    },
    //删除数据
    deleteBtn(row) {
      // 弹出确认框
      this.$confirm(`确认要删除此项任务吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        stoArea(row.id).then(res => {
          this.$message.success(res.msg);
          this.getDataList();
        })
      })
    },
    // 任务状态修改
    toggleState(row) {
      const currentState = row.enableState;
      let text = row.enableState === "1" ? "停用" : "启用";
      let query = {
        status: currentState === "1" ? "0" : "1",
        id: row.id,
      }
      this.$confirm(`确认要${text}此项任务吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        updateStoAreaState(query).then(res => {
          this.$message({
            type: 'success',
            message: `${text}成功!`
          });
          this.getDataList(); // 建议改为刷新数据的方法
        }).catch(error => {
          row.enableState = currentState;
        });
      })
    },
    //筛选库区
    getWms(data) {
      findAllBasicStoStockData({stoId: data}).then(res => {
        this.wmsData = res;
        this.formInline.stoAreaId = '';
        this.getDataList();
      }).catch(error => {
        console.error('获取仓库数据失败:', error);
        this.$message.error('获取仓库数据失败');
      });
    },
    handleSizeChange(newsize) {
      this.formInline.pageNum = 1;
      this.formInline.pageSize = newsize;
      this.getDataList();
    },
    handleCurrentChange(newpage) {
      this.formInline.pageNum = newpage;
      this.getDataList();
    },
    getDataList() {
      let params = {
        stoId: this.formInline.stoId,//库房
        stoAreaId: this.formInline.stoAreaId,//库区
        pageNum: this.formInline.pageNum,
        pageSize: this.formInline.pageSize,
        huowname: this.formInline.huowname
      }
      findStoAreaList(params).then(res => {
        this.informationList = res.rows;
        this.total = res.total;
      })
    },
    // 新增成功后，刷新列表
    addSuccess() {
      this.getDataList();
    },
    //新增/修改数据
    add(type, item) {
      if (!this.formInline.stoAreaId || this.formInline.stoAreaId.length === '') {
        this.$message.warning('请先选择库区');
        return;
      }
      this.visible = true;
      this.$refs.addInformationRef.openDialog(type, item);
    },
    //获取select的值
    selectData(val) {
      this.formInline.pageNum = 1;
      this.formInline.pageSize = 20;
      this.formInline.stoAreaName = '';
      this.getDataList();
    },
    queryValidateForm() {
      this.getDataList();
    },
    cancelValidateForm() {
      this.formInline.huowname = '';
      this.getDataList();
    }
  }
}
</script>

<style lang="scss" scoped>
.informationBox {
  padding: 15px 0px 15px 15px;
}

.el-pagination {
  float: right;
  margin: 20px;
}
</style>
